<ix-page-header [pageTitle]="'Dashboard' | translate" [loading]="!!isLoading()">
  @if (!isEditing()) {
    <button
      mat-button
      color="primary"
      ixTest="configure-dashboard"
      [ixUiSearch]="searchableElements.elements.configure"
      [disabled]="isLoading()"
      (click)="onConfigure()"
    >
      {{ 'Configure' | translate }}
    </button>
  }
</ix-page-header>

@if (isEditing()) {
  <div class="edit-mode-buttons">
    @if (customLayout()) {
      <button
        mat-button
        type="button"
        ixTest="reset"
        [disabled]="isLoading()"
        [matTooltip]="'Restore default set of widgets' | translate"
        (click)="onReset()"
      >
        {{ 'Reset' | translate }}
      </button>
    }

    <button
      mat-button
      class="add-button"
      ixTest="add-group"
      [disabled]="isLoading()"
      (click)="onAddGroup()"
    >
      {{ 'Add' | translate }}
    </button>
    <button
      mat-button
      color="primary"
      ixTest="save"
      [disabled]="isLoading()"
      (click)="onSave()"
    >
      {{ 'Save' | translate }}
    </button>
    <button
      mat-button
      ixTest="cancel"
      [disabled]="isLoading()"
      (click)="onCancelConfigure()"
    >
      {{ 'Cancel' | translate }}
    </button>
  </div>
}

@if (isLoadingFirstTime()) {
  <ngx-skeleton-loader
    class="groups loading"
    [count]="6"
    [theme]="{ background: 'var(--alt-bg2)', opacity: 0.25, margin: 0 }"
  ></ngx-skeleton-loader>
} @else {
  <div
    class="groups"
    cdkDropList
    cdkDropListOrientation="mixed"
    [ixUiSearch]="searchableElements.elements.dashboard"
    (cdkDropListDropped)="onGroupsReordered($event)"
  >
    @if (renderedGroups().length > 0) {
      @for (group of renderedGroups(); track group; let i = $index) {
        <div
          class="group-slot"
          cdkDrag
          cdkDragPreviewContainer="parent"
          @groupRemovedTrigger
        >
          <div
            class="group-container"
            [class.editing]="isEditing()"
          >
            <ix-widget-group-controls
              class="controls"
              [index]="i"
              [totalGroups]="renderedGroups().length"
              [disableFocusableElements]="!isEditing()"
              (moveUp)="onMoveGroup(i, -1)"
              (moveDown)="onMoveGroup(i, 1)"
              (edit)="onEditGroup(i)"
              (delete)="onDeleteGroup(group)"
            ></ix-widget-group-controls>

            <ix-widget-group
              class="group"
              [disableFocusableElements]="isEditing()"
              [group]="group"
            ></ix-widget-group>
          </div>
        </div>
      }
    } @else {
      <ix-empty [conf]="emptyDashboardConf"></ix-empty>
    }
  </div>
}


